import type { Meta, StoryObj } from "@storybook/vue3-vite";
import EmoText from "./Emo-Text.vue";
import type { ThemeType, SizeType } from "../../type/index";

// 定义 Story 的类型
type Story = StoryObj<typeof EmoText>;

const meta: Meta<typeof EmoText> = {
    title: "EmoText",
    component: EmoText,
    tags: ['autodocs'],
    // 使用自定义类型配置 argTypes
    argTypes: {
        type: {
            control: { type: 'select' },
            options: ['primary', 'success', 'warning', 'danger', 'info'] as ThemeType[],
            description: '组件主题类型'
        },
        size: {
            control: { type: 'select' },
            options: ['small', 'default', 'large'] as SizeType[],
            description: '组件尺寸'
        },
        text: {
            control: { type: 'text' },
            description: '显示的文本内容'
        },
        color: {
            control: { type: 'color' },
            description: '文本颜色'
        },
        width: {
            control: { type: 'text' },
            description: '组件宽度'
        },
        height: {
            control: { type: 'text' },
            description: '组件高度'
        }
    },
    // 设置默认参数
    args: {
        text: "这是示例文本",
        type: "primary" as ThemeType,
        size: "default" as SizeType,
        color: "#000"
    }
};

export default meta;

// 基础示例
export const Basic: Story = {
    args: {
        text: "基础文本组件",
        color: "#DC362E",
    }
};

// 不同主题类型示例
export const ThemeVariants: Story = {
    render: () => ({
        components: { EmoText },
        template: `
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <EmoText text="Primary 主题" type="primary" />
                <EmoText text="Success 主题" type="success" />
                <EmoText text="Warning 主题" type="warning" />
                <EmoText text="Danger 主题" type="danger" />
                <EmoText text="Info 主题" type="info" />
            </div>
        `
    })
};

// 不同尺寸示例
export const SizeVariants: Story = {
    render: () => ({
        components: { EmoText },
        template: `
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <EmoText text="小尺寸文本" size="small" />
                <EmoText text="默认尺寸文本" size="default" />
                <EmoText text="大尺寸文本" size="large" />
            </div>
        `
    })
};

// 自定义颜色示例
export const CustomColor: Story = {
    args: {
        text: "自定义颜色文本",
        color: "#ff362E",
        type: "primary" as ThemeType
    }
};

// 交互式示例
export const Interactive: Story = {
    args: {
        text: "点击我试试",
        type: "success" as ThemeType,
        size: "large" as SizeType,
        color: "#52c41a"
    },
    argTypes: {
        // 可以为特定 story 覆盖 argTypes
        type: {
            control: { type: 'select' },
            options: ['primary', 'success', 'warning', 'danger', 'info'] as ThemeType[]
        }
    }
};